<template>
<b-list-group :key="key_refresh">
  <b-list-group-item href="#" class="file-list-item flex-column align-items-start" v-for="i in list_notes" v-bind:key="i.file_uniquename" @click="download(i)">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">{{ i.originalname }}</h5>
      <small>{{ moment(i.timestamp).format("M月D日 YYYY") }}</small>
    </div>
  </b-list-group-item>
</b-list-group>

<!--b-list-group id="list">
  <b-list-group-item href="#" class="file-list-item flex-column align-items-start" >
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group item heading</h5>
      <small>3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small>Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" class="file-list-item flex-column align-items-start" v-show="!isHidden" @click="del">
    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>
    <small class="text-muted">Donec id elit non mi porta.</small>
    <span v-for="i1 in list_items"><span>{{i1}}</span></span>
  </b-list-group-item>

</b-list-group-->
</template>

<style scoped>
.file-list-item{
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.83, 0.2, 0.33, 0.9);
}
.list-group-item-action:hover, .list-group-item-action:focus {
    z-index: revert;
}
</style>

<script setup>
// https://github.com/doesdev/leven-sort
// https://stackoverflow.com/questions/10473745/compare-strings-javascript-return-of-likely
  
import fileDownload from 'js-file-download'
import { getCurrentInstance } from 'vue'
import { ref, onMounted } from 'vue'
import { key } from '../../store'
import { useStore } from 'vuex'
import { inject } from "vue"
import moment from 'moment'

var key_refresh = ref(0)
const axios = inject('axios');
var list_notes = ref(['', ''])
const store = useStore(key)
const token = store.state.token
const app = getCurrentInstance()
const serverurl = app.appContext.config.globalProperties.$serverurl


function refresh_list_notes(){
  let formData = new FormData()
  formData.append('token', token)
  formData.append('index', 0)
  formData.append('quantity', 10)
  formData.append('similarity', '')
  axios.post(serverurl + 'list_notes',
    formData, {
      headers:{ 'Content-Type': 'multipart/form-data' },
    }).then((response)=>{
      list_notes.value = response.data.list
      key_refresh.value = key_refresh.value +1
    })
}


async function download(i){
  axios.get(serverurl + 'download', { params: {
    //token: token,
    file_uniquename: i.file_uniquename
  }}).then(res => {
    fileDownload(res.data, res.headers['x-suggested-filename']);
  });
}


onMounted(() => {
  refresh_list_notes()
  setInterval(refresh_list_notes, 1000)
})


function del(event){
  var div = event.currentTarget
  var divHeight = div.scrollHeight
  var divTransition = div.style.transition
  div.style.transition = '';
  requestAnimationFrame(function() {
    div.style.height = divHeight + 'px';
    div.style.transition = divTransition;
    requestAnimationFrame(function() {
      div.style.height = 0 + 'px';
      div.style.borderBottom = 0 + 'px';
      div.style.paddingTop = 0 + 'px';
      div.style.paddingBottom = 0 + 'px';
    });
  });
  setTimeout(()=>{this.isHidden = true}, 1000)
}

</script>